<template>
	<view>
		<at-myproj-list :list="myProjlist" :iempty="empty" type="1" @remove="removeShow" @toDet="toDet"></at-myproj-list>
		<u-modal :show="showModal" @confirm="removeConfirm" ref="uModal" :asyncClose="true" :closeOnClickOverlay="true"
			showCancelButton @cancel="showModal=false" @close="showModal=false" title='确定要删除这条项目吗？'></u-modal>
	</view>
</template>

<script>
	import AtMyprojList from '@/components/AtMyprojList'
	import {
		myprojlist,
		deleteproj
	} from '@/common/http.api.js'
	export default {
		components: {
			AtMyprojList
		},
		data() {
			return {
				showModal: false,
				myProjlist: [],
				pid:'',
				empty :false
			}
		},
		onShow() {
			this.getMyprojlist()
		},
		// watch: {
		// 	empty() {
		// 		this.empty = this.myProjlist.length == 0 ? true : false
		// 	}
		// },
		methods: {
			async getMyprojlist() {
				this.empty = false
				let userId = this.$store.state.userId 
				const res = await myprojlist({
					userId
				})
				this.myProjlist = res.data
				this.empty =  this.myProjlist.length == 0 ? true : false
			},
			async removeConfirm() {
				const res = await deleteproj({
					projId: this.pid 
				})
				if (res.code === 0) {
					// 用fliter 而不用 splice直接改变原数组 是因为 vue2 无法监视数组下标及长度变化
					this.myProjlist = this.myProjlist.filter(i => i.projId != this.pid) 
					uni.$showMsg('删除成功')
				}
				this.showModal = false
			},
			removeShow(id) {
				this.pid = id
				this.showModal = true
			},
			toDet(id) {
				uni.navigateTo({
					url: `/pages/projDetail/projDetail?id=${id}`,
				});
			}
		}


	}
</script>

<style>
</style>
